<template>
  <div class="container">
    <div v-for="(item,index) in shoplist" :key="index" class="shopbox">
      <div class="shop_img">
        <img :src="'http://localhost:3007/uploads/'+item.shop_img" alt="">
      </div>
      <div class="name">{{ item.shop_name }}</div>
      <div class="shop_ps">
        <div class="price">{{ item.shop_price }}</div>
        <div class="status">{{ item.shop_status }}</div>
      </div>
      <div class="details">{{ item.shop_details }}</div>
      <div class="add" @click="addShop(item.shop_id)"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shoplist:[]
    }
  },
  created() {
    this.getShopList()
  },
  methods: {
    async getShopList() {
      const res = await this.$api.shop.getShopList()
      const { data: { data: shoplist } } = res
      this.shoplist = [
        ...shoplist
      ]
    },
    async addShop(data) {
      const shopid = { 'shop_id':data }
      const res = await this.$api.shop.addShop(shopid)
      if(res.data.status !== 0) {
        alert('添加失败!')
      }else {
        alert('添加成功!')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px 500px 0 200px;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  height: 100%;
  overflow: auto;
  background-image: url('./images/shopbg.png');
  background-size: 100% 100%;
  .shopbox {
    width: 350px;
    height: 500px;
    position: relative;
    flex:0 0 30%;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, .3);
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
    color: #000;
    .shop_img {
      width: 100%;
      margin-top: 5px;
      margin-bottom: 5px;
      img {
        margin: 0 auto;
        width: 180px;
        height: 240px;
      }
    }
    .name {
      margin-left: 5px;
      margin-bottom: 5px;
    }
    .shop_ps {
      display: flex;
      margin-left: 5px;
      margin-bottom: 10px;
      .status {
        margin-left: 250px;
      }
    }
    .details {
      padding:0 5px 0 5px
    }
    .add {
      width: 50px;
      height: 50px;
      position: absolute;
      bottom: 10px;
      right: 10px;
      background-image: url('./images/addshop.png');
      background-size: 100% auto;
      background-position: 0 0;
      background-repeat: no-repeat;
    }
  }
}

</style>
